<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta name="title" th:content="'联系方式_'+${title}" />
		<meta name="description" th:content="${description}" />
		<meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>联系方式</title>
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/index.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=63W4wCS4i4SEEmKbNqLuzV55zOy1enim&s=1"></script>
		<style>
			.shop-cont .company-tab-container{
				display: flex;
				justify-content: space-between;
			}
			.shop-map{
				width: calc(100% - 170px);
			}
			.shop-info{
				width: 150px;
			}
			@media screen and (max-width: 768px) {
				.shop-cont .company-tab-container{
					display: block;
				}
				.shop-map{
					width: 100%;
				}
				.shop-lx{
					display: flex;
					justify-content: space-between;
				}
				.shop-map #allmap{
					height: 300px !important;
				}
				.shop-info{
					width: 100%;
					padding-bottom: 30px;
				}
				.bWxvtx{
					margin-bottom: 20px;
				}
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div>
				<div class="cOYSvF">
					<div class="header-page"></div>
					<div class="swiper-shop swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" th:each="banner :${banners}" th:style="'background: url(' + ${banner.images} + ');'">

							</div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="eZHbVe" style="margin-top: 30px;">
						<div class="fQWhJi">
							<div class="cOQGsL bWxvtx">
								<div class="Mhpno container just-content-between align-center">
									<div class="flex align-center">
										<div class="stand-header-company">
											<span class="mEGBK stand-header-logo">
												<a class="eccJFs link-cursor clickthrough-logo" target="_blank" rel="">
													<img th:src="${shop.logo}"
														class="bWQCCx">
												</a>
											</span>
											<span class="hZjMEj"></span>
										</div>
										<div class="shop-name">
											<p th:text="${shop.name}">北京小米汽车</p>
											<span th:text="${shop.mobile}">400-44444-555</span>
										</div>
									</div>
									<div class="eUJDYj">
										<ul class="stand-header-nav">
											<li >
												<a th:href="@{'../shops/'+${shop.userId}+'.html'}">展商介绍</a>
											</li>
											<li>
												<a  th:href="@{'../shops/'+${shop.userId}+'/product/'+${shop.userId}+'.html'}">主导产品</a>
											</li>

											<li >
												<a th:href="@{'../shops/'+${shop.userId}+'/news/'+${shop.userId}+'.html'}">新闻发布</a>
											</li>
											<li>
												<a
														th:href="@{'../shops/'+${shop.userId}+'/activity/'+${shop.userId}+'.html'}">活动预告</a>
											</li>
											<li class="active">
												<a th:href="@{'../shops/shopInfor-'+${shop.userId}+'.html'}"
												>联系方式</a>
											</li>
											<!-- <li>
												<a href="shopBusiness.html">商机</a>
											</li> -->
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="shop-cont flex just-content-between">
							<!-- <div class="shop-box" style="display: block;">
								<div class="shop-logo">
									<img src="https://img.directindustry.com/images_di/logo-p/L54752.gif">
								</div>
								<div class="shop-phone">
									<div>
										<div class="shop-nav flex dire-column align-center">
											<a href="shop.html">展商介绍</a>
											<a href="shopProduct.html">展商产品</a>
											<a href="shopNews.html">展商新闻</a>
											<a href="shopActivity.html">展会活动</a>
										</div>
										<div class="line"></div>
									</div>
									<div>
										<div class="shop-lx">
											<p>联系人：张先生</p>
											<p>电话：010126554</p>
											<p>邮箱：12345@com.cn</p>
											<p>微信：zhangxiansheng</p>
											<p>QQ：123456789</p>
											<p>
												<img height="100" src="img/code.png" alt="">
											</p>
										</div>
										<div class="line"></div>
									</div>
								</div>
								<div class="shop-btn flex just-content-between">
									<a href="">在线留言</a>
									<a href="">递交名片</a>
								</div>
							</div> -->
							<div class="company-tab-container">
								<div class="shop-info">
									<div class="shop-lx">
										<div>
											<p th:each=" t :${headers}"><span th:text="${t.title}">联系人 </span> ：<span th:text="${t.headerVal}">张先生</span></p>

										</div>
<!--										<p th:utext="${shopinfo.qe}">-->
<!--&lt;!&ndash;											<img height="100" src="img/code.png" alt="">&ndash;&gt;-->
<!--										</p>-->
									</div>
									<div class="line"></div>
									<div class="shop-btn flex just-content-between">
										<a href="form.html?type=1">在线留言</a>
										<a href="form.html?type=2">递交名片</a>
									</div>
								</div>
								<div class="shop-map">
									<div id="allmap" style="height: 600px;"></div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="footer-page"></div>
			<div class="login-cli"></div>
		</div>
		<script>
			$(function() {
				$(".header-page").load("http://122.14.195.113:8089/header.html");
				$(".footer-page").load("http://122.14.195.113:8089/footer.html");
				$(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
			});
			var swiper = new Swiper('.swiper-shop', {
				spaceBetween: 0,
				loop: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				observer: true,
				observeParents: true,
				watchOverflow: true
			});
			setmap('118.308965','35.238401')
			function setmap(mapX, mapY) {
				var map = new BMap.Map("allmap");
				var sContent = `<table><tr><td>名称：</td></tr><tr><td> 地点：</td></tr><tr><td> 电话：</td></tr></table>`; //定义大标题  写html语句标签
				var point = new BMap.Point(mapX, mapY); // 经纬度坐标
				map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别。
				map.addControl(new BMap.NavigationControl());
				//设置标注的图标
				var icon = new BMap.Icon("img/map.png", new BMap.Size(32, 32));
				//设置标注的经纬度
				var marker = new BMap.Marker(new BMap.Point(mapX, mapY), {
					icon: icon
				});
				//把标注添加到地图上
				map.addOverlay(marker);
				map.enableScrollWheelZoom(true); // 启用滚轮放大缩小。
				var infoWindow = new BMap.InfoWindow(sContent);
				map.openInfoWindow(infoWindow, point); //开启信息窗口
				marker.addEventListener("click", function() {
					this.openInfoWindow(infoWindow);
				});
			}
		</script>
	</body>
</html>
